<template>
  <div>
    <van-nav-bar title="收货地址" left-arrow @click-left="onClickLeft" ><span slot="right" @click="onAdd">新增地址</span></van-nav-bar>
    <!-- <address-item></address-item> -->
    <div v-if="list.length != 0">
      <input type="text" placeholder="请输入收货人姓名" v-model="search" />
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        ref="addressList"
        @edit="onEdit"
        @select="onClick"
      />
    </div>
    <div v-else>
      <nodata></nodata>
      <!-- <div class="add-address" @click="onAdd"><div>新增收货地址</div></div> -->
    </div>
  </div>
</template>

<script>
import addressItem from "@/components/address_item";
import { Toast } from "vant";
import nodata from "../../components/noData";
export default {
  data() {
    return {
      chosenAddressId: "1",
      list: [],
      search: "",
    };
  },
  components: {
    addressItem,
    nodata,
  },
  watch: {
    search() {
      this.apiPost("/user/search_address", {
        token: localStorage.getItem("token"),
        search: this.search,
        user_id: localStorage.getItem("id"),
      }).then((res) => {
        if (res.data.code === 200) {
          this.list = res.data.data;
          this.addDefault();
          if (this.search != "") {
            Toast(res.data.message);
          }
        } else {
          Toast(res.data.message);
        }
      });
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back(-1);
    },
    onClick(item, index) {
      // Toast('点击:选择收货地址');
      if (this.$route.query.flag == 1) {
        this.$router.push({
          path: "/order_detail",
          query: {
            name: item.name,
            tel: item.tel,
            address: item.address,
            province_code: item.province_code,
            city_code: item.city_code,
            area_code: item.area_code,
          },
        });
      }
    },
    onAdd() {
      // Toast('新增地址');
      this.$router.push("/add_address");
    },
    onEdit(item, index) {
      // Toast('编辑地址:' + index);
      this.$router.push({
        path: "/add_address",
        query: {
          id: item.id,
          name: item.name,
          tel: item.tel,
          address: item.address,
        },
      });
    },
    addDefault() {
      let address_list = this.$refs.addressList;
      let address_item__name = address_list.querySelectorAll(
        ".van-address-item__name"
      );
      this.list.forEach((item, index) => {
        try {
          address_item__name[index].classList.remove("default");
        } catch (err) {}
        if (item.isDefault && item.isDefault == 1) {
          address_item__name[index].classList.add("default");
        }
      });
    },
  },
  async mounted() {
    try {
      const res = await this.apiPost("user/get_address", {
        token: localStorage.getItem("token"),
      });
      // console.log(res);
      if (res.data.code == 200) {
        this.list = res.data.data;
      } else {
        Toast(res.data.message);
      }
    } catch (error) {
      Toast("请稍后再试:" + error);
    }
  },
  updated() {
    this.addDefault();
  },
};
</script>

<style  scoped>
input {
  margin: 1em 0;
  padding: 0.5em 3em 0.5em 1em;
  width: 70%;
  border-radius: 2em;
  border-style: none;
  border: 1px solid #cccccc;
  background: #fff url("../../assets/i/01/so.png") no-repeat 95% center/7%;
  text-align: center;
}
.add-address {
  width: 80vw;
  height: 13.333vw;
  position: relative;
  bottom: 0;
  left: 50%;
  margin: 8vw auto 0 auto;
  margin-left: -40vw;
  margin-bottom: 10vh;
  border-radius: 5vw;
  line-height: 13.333vw;
  text-align: center;
  color: #fff;
  background-color: #b43e3a;
}
.van-address-item__name {
  width: 100%;
}
.van-address-item__name.default::after {
  content: "默认";
  position: absolute;
  right: 13.333vw;
  color: #b43e3a;
}
</style>